<template>
	<view class="container">
		<view class="">
			<view class="user-section">
				<view class="rech_recode" @click="navToUrl('/pages/wallet/rechargelog')">充值记录</view>
				<view class="vip-card-box"> 
				    <view class="money">{{ recharge.money }}</view>
					<view class="text">充值金额(元)</view>
				</view>
			</view>
			<view class="">
				<view class="margin-lg">
					<view class="action text-white">选择支付通道</view>
				</view>
				<!-- <view class="cu-list menu-avatar">
					<view class="list" @click="selectChannel(item.payment, item.qrcode)" v-for="(item, index) in channels" :key="index">
						<view class="cu-avatar round lg" :style="'background-image: url(' + item.img + ');width:15%;'">
						</view>
						<view class="content text-center" style="width: 75%">
							<view class="text-white text-lg margin-bottom-sm">{{ item.title  }}</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{ item.subtitle }}</view>
							</view>
						</view>
						<view class="action text-center" style="width: 10%">
							<view class="cuIcon-roundcheckfill text-red" v-if="item.payment == selectedChannel"></view>
							<view class="cuIcon-roundcheck text-gray" v-else></view>
						</view>
					</view>
				</view> -->
				<view class="cu-list menu-avatar">
					<view class="list" @click="selectChannel(item.payment, item.qrcode)" v-for="(item, index) in channels" :key="index" >
						<view class="cu-avatar round lg" :style="'background-image: url(' + item.img + ');width:15%;'" > </view>
						<view class="content" style="width: 75%">
							<view class="name">{{ item.title  }}</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{ item.subtitle }}</view>
							</view>
						</view>
						<view class="action text-center" style="width: 10%">
							<view class="cuIcon-roundcheckfill text-red" v-if="item.payment == selectedChannel"></view>
							<view class="cuIcon-roundcheck text-gray" v-else></view>
						</view>
					</view>
				</view>
				<view class="cu-form-group margin-lg padding-0 submit_btn">
					<button :disabled="enableRecharge" class="cu-btn" type="button" @click="beginRecharge()">
						确认支付
					</button>
				</view>
			</view>
		</view>
		<view v-html="success_html">{{ success_html }}</view>
		<view :class="
        'cu-modal cu-qrcodepay' + [modalName == 'qrcodepay' ? ' show' : '']
      ">
			<view class="cu-dialog bg-white">
				<view class="bg-img">
					<view class="cu-content">
						<view class="padding">{{ banks.bankadds }}</view>
						<view class="padding qrcode">
							<image :src="banks.account" mode="aspectFill"></image>
						</view>
						<view class="text-center">{{ banks.name }}</view>
						<view class="text-center text-bold text-xl text-red padding">
							<text class="text-price">{{ recharge.money }}</text>
						</view>
					</view>
					<view class="cu-bar bg-white grid col-2">
						<view class="bg-grey padding" @click="cancelPay()">取消支付</view>
						<view class="bg-red padding" @click="confimPay()">已支付完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loaded: !1,
				loading: !1,
				enableRecharge: !1,
				coin: "",
				channels: [],
				selectedChannel: "",
				recharge: {
					id: "",
					money: "0.00",
					orderid: "",
				},
				modalName: null,
				banks: {},
				success_html: "",
			};
		},
		onLoad: function(option) {
			this.recharge.orderid = option.orderid;
			this.helper.checkLogin();
			this.loadData();
		},
		methods: {
			loadData: function() {
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign([
					"orderid=" + this.recharge.orderid,
					"token=" + info.token,
					"timestamp=" + timestamp,
				]);
				this.helper
					.req({
						api: "getChannel",
						timestamp: timestamp,
						data: {
							orderid: this.recharge.orderid,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: "GET",
					})
					.then((res) => {
						this.recharge = res.data.data.recharge;
						this.channels = res.data.data.channels;

						// 遍历 channels，保存 min 和 max 值到 this 对象中
						this.channels.forEach((channel) => {
							let payment = channel.payment; // 获取 payment 标识
							let min = channel.min; // 获取 min 值
							let max = channel.max; // 获取 max 值

							// 保存到 this 对象中
							this[`${payment}min`] = min;
							this[`${payment}max`] = max;

							// 打印 min 和 max 值（可选）
							console.log(`通道: ${payment}, 最小值: ${min}, 最大值: ${max}`);
						});

						// 如果 channels 不为空，默认选择第一个通道
						if (this.channels.length > 0) {
							this.selectedChannel = this.channels[0]["payment"];
						}
					});
			},

			selectChannel: function(payment) {
				// alert(1);
				console.log(this.channels, payment);
				// return;
				// 获取该支付方式的最小充值金额和最大充值金额
				let minRecharge = this[`${payment}min`];
				let maxRecharge = this[`${payment}max`];

				console.log(`最小值: ${minRecharge}`);
				console.log(`最大值: ${maxRecharge}`);

				// 检查当前充值金额是否在支付方式的限制范围内
				if (
					parseFloat(this.recharge.money) >= parseFloat(minRecharge) &&
					parseFloat(this.recharge.money) <= parseFloat(maxRecharge)
				) {
					this.selectedChannel = payment;
					this.ChannelStatus = 1;
				} else {
					// 如果充值金额不在范围内，则不选择该支付方式，并修改item.subtitle
					this.selectedChannel = "";
					this.ChannelStatus = 0;
					let index = this.channels.findIndex((item) => item.payment === payment);
					if (index !== -1) {
						this.$set(this.channels[index], "subtitle", "不支持该金额");
					}
				}
			},
			beginRecharge: function() {
				//this.enableRecharge = !0;
				this.modalName = null;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign([
					"channel=" + this.selectedChannel,
					"orderid=" + this.recharge.orderid,
					"token=" + info.token,
					"timestamp=" + timestamp,
				]);
				this.helper
					.req({
						api: "getPaymentInfo",
						timestamp: timestamp,
						data: {
							channel: this.selectedChannel,
							orderid: this.recharge.orderid,
							token: info.token,
						},
						header: {
							sign: sign
						},
						method: "GET",
					})
					.then((res) => {
						this.banks = res.data.data.banks;
						switch (this.selectedChannel) {
							case "bank":
								uni.redirectTo({
									url: "/pages/wallet/transfer-success?orderid=" +
										this.recharge.orderid,
								});
								break;
							case "usdt_pay":
								uni.redirectTo({
									url: "/pages/wallet/usdt_transfer?orderid=" +
										this.recharge.orderid,
								});
								break;
							case "qr_alipay":
								uni.redirectTo({
									url: "/pages/wallet/alipay_transfer?orderid=" +
										this.recharge.orderid,
								});
								break;
							case "qr_wechat":
								uni.redirectTo({
									url: "/pages/wallet/wxpay_transfer?orderid=" +
										this.recharge.orderid,
								});
								break;
							case "online_alipayapp":
								let that = this;
								// #ifdef APP-PLUS
								let orderInfo = res.data.data.banks.alipayapp;
								this.requestPayment("alipay", orderInfo);
								// #endif
								// #ifndef APP-PLUS
								uni.showModal({
									title: "提示",
									content: "请选择其他支付方式",
									showCancel: false,
									confirmText: "确定",
									success: function(res) {
										if (res.confirm) {
											that.enableRecharge = !1;
										}
									},
								});
								// #endif
								break;
							case "online_alipay":
								this.success_html = res.data.data.banks.success_html;

								// #ifdef APP-PLUS
								let online_alipay = plus.webview.create(this.success_html);
								online_alipay.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "union_pay":
								this.success_html = res.data.data.banks.success_html;

								// #ifdef APP-PLUS
								let w = plus.webview.create(this.success_html);
								w.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "youdao_pay":
								this.success_html = res.data.data.banks.success_html;
								//console.log('进入youdaopay',this.success_html)
								// #ifdef APP-PLUS
								let ww = plus.webview.create(this.success_html);
								ww.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "youdaopay":
								this.success_html = res.data.data.banks.success_html;
								//console.log('进入youdaopay',this.success_html)
								// #ifdef APP-PLUS
								let www = plus.webview.create(this.success_html);
								www.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "yunshanfu":
								this.success_html = res.data.data.banks.success_html;

								// #ifdef APP-PLUS
								let wwww = plus.webview.create(this.success_html);
								wwww.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
								// case "online_wechat":
								// 	break;
								// case "weixin":
								// 	t = {
								// 		status: 1,
								// 		statusCode: 200,
								// 		data: this.banks
								// 	};
								// 	this.requestPayment("wxpay", t);
								// 	break;
								//备用
							case "UnionPayA":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入UnionPayA", this.success_html);
								// #ifdef APP-PLUS
								let UnionPayA = plus.webview.create(this.success_html);
								UnionPayA.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "UnionPayB":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入UnionPayB", this.success_html);
								// #ifdef APP-PLUS
								let UnionPayB = plus.webview.create(this.success_html);
								UnionPayB.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "UnionPayC":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入UnionPayC", this.success_html);
								// #ifdef APP-PLUS
								let UnionPayC = plus.webview.create(this.success_html);
								UnionPayC.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "yunshanfuA":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入yunshanfuA", this.success_html);
								// #ifdef APP-PLUS
								let yunshanfuA = plus.webview.create(this.success_html);
								yunshanfuA.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "yunshanfuB":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入yunshanfuB", this.success_html);
								// #ifdef APP-PLUS
								let yunshanfuB = plus.webview.create(this.success_html);
								yunshanfuB.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "yunshanfuC":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入yunshanfuC", this.success_html);
								// #ifdef APP-PLUS
								let yunshanfuC = plus.webview.create(this.success_html);
								yunshanfuC.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "AlipayA":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入AlipayA", this.success_html);
								// #ifdef APP-PLUS
								let AlipayA = plus.webview.create(this.success_html);
								AlipayA.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "AlipayB":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入AlipayB", this.success_html);
								// #ifdef APP-PLUS
								let AlipayB = plus.webview.create(this.success_html);
								AlipayB.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "AlipayC":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入AlipayC", this.success_html);
								// #ifdef APP-PLUS
								let AlipayC = plus.webview.create(this.success_html);
								AlipayC.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "WechatPayA":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入WechatPayA", this.success_html);
								// #ifdef APP-PLUS
								let WechatPayA = plus.webview.create(this.success_html);
								WechatPayA.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "WechatPayB":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入WechatPayB", this.success_html);
								// #ifdef APP-PLUS
								let WechatPayB = plus.webview.create(this.success_html);
								WechatPayB.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "WechatPayC":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入WechatPayC", this.success_html);
								// #ifdef APP-PLUS
								let WechatPayC = plus.webview.create(this.success_html);
								WechatPayC.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoA":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoA", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoA = plus.webview.create(this.success_html);
								TongdaoA.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoB":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoB", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoB = plus.webview.create(this.success_html);
								TongdaoB.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoC":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoC", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoC = plus.webview.create(this.success_html);
								TongdaoC.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoD":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoD", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoD = plus.webview.create(this.success_html);
								TongdaoD.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoE":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoE", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoE = plus.webview.create(this.success_html);
								TongdaoE.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoF":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoF", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoF = plus.webview.create(this.success_html);
								TongdaoF.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
							case "TongdaoG":
								this.success_html = res.data.data.banks.success_html;
								console.log("进入TongdaoG", this.success_html);
								// #ifdef APP-PLUS
								let TongdaoG = plus.webview.create(this.success_html);
								TongdaoG.show(); // 显示窗口
								// #endif

								// #ifdef H5
								window.location.href = this.success_html;
								// #endif

								break;
						}
					});
			},
			cancelPay: function() {
				this.modalName = null;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign([
					"orderid=" + this.recharge.orderid,
					"token=" + info.token,
					"timestamp=" + timestamp,
				]);
				this.helper
					.req({
						api: "cancelPay",
						timestamp: timestamp,
						data: {
							orderid: this.recharge.orderid,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: "POST",
					})
					.then((res) => {
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: "/pages/user/person",
									});
								}
							},
						});
					});
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url,
				});
			},
			confimPay: function() {
				this.modalName = null;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign([
					"orderid=" + this.recharge.orderid,
					"token=" + info.token,
					"timestamp=" + timestamp,
				]);
				this.helper
					.req({
						api: "confimPay",
						timestamp: timestamp,
						data: {
							orderid: this.recharge.orderid,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: "POST",
					})
					.then((res) => {
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: "/pages/user/person",
									});
								}
							},
						});
					});
			},
			requestPayment: function(channel, orderInfo) {
				let that = this;

				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign([
					"orderid=" + this.recharge.orderid,
					"token=" + info.token,
					"timestamp=" + timestamp,
				]);
				this.helper
					.req({
						api: "confimPay",
						timestamp: timestamp,
						data: {
							orderid: this.recharge.orderid,
							token: info.token
						},
						header: {
							sign: sign
						},
						method: "POST",
					})
					.then((res) => {});

				uni.requestPayment({
					provider: channel,
					orderInfo: orderInfo,
					success: function(res) {
						// console.log('success:' + JSON.stringify(res));
						uni.redirectTo({
							url: "/pages/wallet/paySuccess?amount=" + that.recharge.money,
						});

						// var info = uni.getStorageSync("userinfo");
						// let timestamp = this.helper.now();
						// let sign = this.helper.setSign(['orderid='+this.recharge.orderid,'token='+info.token,'timestamp='+timestamp]);
						// this.helper.req({
						// 	api:"getRecharge",
						// 	timestamp:timestamp,
						// 	data:{orderid:this.recharge.orderid,token:info.token},
						// 	header:{sign:sign},
						// 	method:'GET',
						// }).then(res=>{
						// 	uni.redirectTo({
						// 		url: "/pages/wallet/paySuccess?amount=" + res.data.data.recharge.money
						// 	})
						// })
					},
					fail: function(err) {
						// console.log('fail:' + JSON.stringify(err));
						uni.showModal({
							content: "支付失败",
							confirmText: "确定",
							success: function(res) {
								if (res.confirm) {
									uni.switchTab({
										url: "/pages/user/person",
									});
								}
							},
						});
					},
					complete: function() {},
				});
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #b6ccf2;
	}

	.rech_recode {
		width: 100%;
		height: 10vw;
		padding: 4vw 4vw 0;
		color: #fff;
		font-size: 14px;
		text-align: right;
	}

	.rechargeCoin {
		font-size: 64upx;
	}

	.cu-avatar {
		background-color: #fff;
		margin-left: 20rpx;
		box-shadow:0 0 3px 1px #f1f1f1; 
		border-radius: 50%;
	}

	.list {
		display: flex;
		padding-right: 5px;
		height: 90px;
		background-color: #fff;
		border-radius: 10px;
		align-items: center;
		margin: 0 40rpx 20rpx 40rpx;
		
	}
	.content{
		margin-left: 30rpx;
	}
	.name{
		color: #353535;
		text-align: left;
		font-size: 34rpx;
		margin-bottom: 10rpx; 
	}
	.qrcode uni-image {
		width: 360upx;
		height: 360upx;
	}

	.vip-card-box {
		height: 250upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10;
		background-image: url('');
		background-size: 100%;
		background-repeat: no-repeat;
		.money{
			color: #bb8724;
			font-size: 64rpx;
			text-align: center;
			font-weight: bold;
			padding-top: 70rpx;
		}
		.text{
			text-align: center;
			color: #353535;
			padding-top: 20rpx;
		}
	}

	.submit_btn .cu-btn {
		background: linear-gradient(180deg, #50a7ff 0%, #3267ff 100%);
	}
</style>